import React, { useState, useEffect } from 'react';
import { YunxiaoIcon, Lead } from '@alife/devops-ui';
import { Rating, Input, Button } from '@teamix/ui';
import './index.scss';
import exceed from 'utils/apimap';
import track from 'utils/track';

const feedbackReview = [
  [
    {
      ruleId: 1,
      info: '布局不合理',
      isSelected: false,
    },
    {
      ruleId: 2,
      info: '文案难理解',
      isSelected: false,
    },
    {
      ruleId: 3,
      info: '通知不及时',
      isSelected: false,
    },
    { ruleId: 4, info: '评论难查找', isSelected: false },
    { ruleId: 5, info: '对比查看不便', isSelected: false },
    { ruleId: 6, info: '文件渲染不佳', isSelected: false },
  ],
  [
    {
      ruleId: 7,
      info: '页面布局',
      isSelected: false,
    },
    {
      ruleId: 8,
      info: '文案表达',
      isSelected: false,
    },
    {
      ruleId: 9,
      info: '消息通知',
      isSelected: false,
    },
    { ruleId: 10, info: '评论入口', isSelected: false },
    { ruleId: 11, info: '对比查看视图', isSelected: false },
    { ruleId: 12, info: '文件渲染', isSelected: false },
  ],
  [
    {
      ruleId: 13,
      info: '布局清晰',
      isSelected: false,
    },
    {
      ruleId: 14,
      info: '信息易查找',
      isSelected: false,
    },
    {
      ruleId: 15,
      info: '评审通知及时',
      isSelected: false,
    },
    { ruleId: 16, info: '评论查看便利', isSelected: false },
    { ruleId: 17, info: '对比查看便利', isSelected: false },
    { ruleId: 18, info: '文件渲染清晰', isSelected: false },
  ],
];
export default function FeedbackCollection() {
  const [mrCommentValue, setmrCommentValue] = useState('');
  const [mrLeadVisible, setmrLeadVisible] = useState(false);
  const [mrRatingValue, setmrRatingValue] = useState(0);
  const { NotifyCard } = Lead;
  const ratingExplains = ['“很糟糕，我要吐槽”', '“一般，以下方面能做的更好”', '“棒！鼓励一下”'];
  const [feedbackRules, setfeedbackRules] = useState(feedbackReview[0]);
  const renderRatingExplains = (rating) => {
    if (!rating) return null;
    if (rating > 0 && rating < 3) {
      return ratingExplains[0];
    } else if (rating < 4) {
      return ratingExplains[1];
    } else {
      return ratingExplains[2];
    }
  };
  useEffect(() => {
    if (mrRatingValue > 0 && mrRatingValue < 3) {
      setfeedbackRules(feedbackReview[0]);
    } else if (mrRatingValue < 4) {
      setfeedbackRules(feedbackReview[1]);
    } else {
      setfeedbackRules(feedbackReview[2]);
    }
  }, [mrRatingValue]);
  const changeSelectedRules = (rules) => {
    return () => {
      const flag = feedbackRules.findIndex((item) => item.ruleId === rules.ruleId);
      const temp = [];
      Object.assign(temp, feedbackRules);
      temp.splice(flag, 1, { ...rules, isSelected: !rules.isSelected });
      setfeedbackRules(temp);
    };
  };
  const renderFeedbackRules = () => {
    if (feedbackRules) {
      return feedbackRules.map((rule) => {
        return (
          <Button
            onClick={changeSelectedRules(rule)}
            type="normal"
            className={rule.isSelected ? 'mr-feedback-rule-selected' : 'mr-feedback-rule'}
          >
            {rule.info}
          </Button>
        );
      });
    }
  };
  const renderFeedbackContent = () => {
    return (
      <div className="mr-header-feedback-content">
        <Rating
          style={{ marginRight: '10px' }}
          defaultValue={5}
          size="large"
          value={mrRatingValue}
          onChange={(val) => setmrRatingValue(val)}
        />
        {!!mrRatingValue && (
          <div style={{ marginTop: '4px' }}>
            <div className="rating-explain">{renderRatingExplains(mrRatingValue)}</div>
            <div className="mr-feedback-rules">{renderFeedbackRules()}</div>
          </div>
        )}

        <Input.TextArea
          value={mrCommentValue}
          onChange={(val) => setmrCommentValue(val)}
          maxLength={1000}
          placeholder="留下你的感受和建议"
          aria-label="TextArea"
          size="large"
          style={{ width: '240px', height: '80px', marginTop: '16px', marginRight: '16px' }}
        />
      </div>
    );
  };
  const nextTimeBtn = (e) => {
    e.stopPropagation();
    setmrLeadVisible(false);
    setTimeout(() => {
      setfeedbackRules(setfeedbackRules[0]);
      setmrRatingValue(0);
      setmrCommentValue('');
    }, 500);
  };
  const finishedBtn = (e) => {
    e.stopPropagation();
    exceed
      .fetch({
        api: 'mr.user_feed_back',
        data: {
          bizScene: 'MR_DETAIL',
          feedbackContent: {
            satisfactionStar: mrRatingValue,
            content: mrCommentValue,
            tags:
              feedbackRules.length > 0
                ? feedbackRules.filter((va) => va.isSelected).map((v) => v.info)
                : [],
          },
        },
      })
      .then((res) => {
        track({
          action: 'submit_feedback',
          page: 'Repo-MR',
          type: '',
          control: '',
        });
        console.log(res);
        setmrLeadVisible(false);
        setTimeout(() => {
          setfeedbackRules(setfeedbackRules[0]);
          setmrRatingValue(0);
          setmrCommentValue('');
        }, 500);
      })
      .fail((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    const element = document.querySelector('.notify-card-body');
    const elementTitle = document.querySelector('.notify-card-title');
    if (element && mrRatingValue !== 0) {
      element.classList.add('notify-card-body-custom');
      elementTitle.setAttribute('style', 'display:none');
    } else if (element && mrRatingValue === 0) {
      element.classList.remove('notify-card-body-custom');
      elementTitle.setAttribute('style', 'display:flex');
    }
  }, [mrRatingValue]);
  return (
    <div className="feed-back-wrap">
      <div className="mr-feedback-content" onClick={() => setmrLeadVisible(true)}>
        <NotifyCard
          className="mr-notify-card"
          width={280}
          title={!mrRatingValue && '合并请求使用感受如何？'}
          visible={mrLeadVisible}
          btns={[
            { type: 'normal', text: '下次再说', onClick: (e) => nextTimeBtn(e) },
            { type: 'primary', text: '提交', onClick: (e) => finishedBtn(e) },
          ]}
          type="lite"
          headerImg={
            'https://img.alicdn.com/imgextra/i3/O1CN01Zj5zn31DYT3OuHY0V_!!6000000000228-2-tps-560-244.png'
          }
        >
          {renderFeedbackContent()}
        </NotifyCard>
        <div className="mr-feedback-content-want">
          <YunxiaoIcon type="message-line" size="small" />
          <span className="mr-feedback-content-want-title">我要反馈</span>
        </div>
        <span className="mr-feedback-content-thoughts">你的想法很重要 🙇‍♂️</span>
      </div>
    </div>
  );
}
